Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 312 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Rolling Dark Mode Toggle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
  </head>

  <body>
    <svg display="none">
      <symbol id="light" viewBox="0 0 24 24">
        <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(0,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(45,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(90,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(135,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(180,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(225,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(270,12,12)" />
          <line x1="12" y1="17" x2="12" y2="20" transform="rotate(315,12,12)" />
        </g>
        <circle fill="currentColor" cx="12" cy="12" r="5" />
      </symbol>

      <symbol id="dark" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M15.1,14.9c-3-0.5-5.5-3-6-6C8.8,7.1,9.1,5.4,9.9,4c0.4-0.8-0.4-1.7-1.2-1.4C4.6,4,1.8,7.9,2,12.5c0.2,5.1,4.4,9.3,9.5,9.5c4.5,0.2,8.5-2.6,9.9-6.6c0.3-0.8-0.6-1.7-1.4-1.2C18.6,14.9,16.9,15.2,15.1,14.9z"
        />
      </symbol>
    </svg>

    <label class="switch">
      <input class="switch__input" type="checkbox" role="switch" name="dark" />
      <svg class="switch__icon" width="24" height="24" aria-hidden="true">
        <use href="#light" />
      </svg>

      <svg class="switch__icon" width="24" height="24" aria-hidden="true">
        <use href="#dark" />
      </svg>

      <span class="switch__inner"></span>

      <span class="switch__inner-icons">
        <svg class="switch__icon" width="24" height="24" aria-hidden="true">
          <use href="#light" />
        </svg>

        <svg class="switch__icon" width="24" height="24" aria-hidden="true">
          <use href="#dark" />
        </svg>
      </span>
    </label>
  </body>
</html>

Share this file: